<template>
    <div class="app-container">
        <ContractInfo :contract-info="detailInfo.contractInformation" :customer-id="detailInfo.customerId"></ContractInfo>
        <OutCarInfo :outbound-vehicle-condition="detailInfo.outboundVehicleCondition"></OutCarInfo>
        <ReturnCarSettlementForm ref="returnCarSettlementForm" :detail-info="detailInfo"></ReturnCarSettlementForm>
        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="back">取消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        </div>
    </div>
</template>

<script>
import ContractInfo from "@/views/returnCar/components/ContractInfo.vue";
import OutCarInfo from "@/views/returnCar/components/OutCarInfo.vue";
import ReturnCarSettlementForm from "@/views/returnCar/components/ReturnCarSettlementForm.vue";
import * as orderReturnApi from "@/api/returnCar/returnCar";

export default {
    name:'CommitReturnCar',
    components: {ReturnCarSettlementForm,OutCarInfo, ContractInfo},
    data() {
        return {
            buttonLoading: false,
            form: {},
            detailInfo:{},
        }
    },
    computed: {},
    methods: {
        getDetail(){
            orderReturnApi.initiationDetails(this.$route.query.orderNo).then(res=>{
                this.detailInfo = res.data;
            })
        },
        changeReturnCarType() {

        },

        submitForm() {
            const tmpForm = this.$refs?.returnCarSettlementForm?.saveForm();
            console.log('子组件传过来的表单-----', tmpForm)
            if (tmpForm) {
               this.form = {
                   ...tmpForm,
                   orderNumber:this.$route.query.orderNo,
               }
                console.log('最终表单-----', this.form)
                this.buttonLoading = true
                orderReturnApi.orderReturn(this.form).then(res=>{
                    this.$message.success('提交审批成功')
                    this.back()
                }).finally((f)=>{
                    this.buttonLoading = false
                })
            }
        },
        back() {
            this.$router.back()
            this.$store.dispatch('tagsView/delView', this.$route)
        },
    },
    mounted() {
    this.getDetail()
    },

}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--small .el-form-item__content {
    line-height: 33px;
}
</style>
